<template>
	<el-dialog v-model="visible" :destroy-on-close="true" :width="1000" top="5" :title="dialogData.title">
		<el-form :model="formData" ref="ruleFormRef" :rules="rules" label-width="0px">
			<el-row>
				<el-col :span="12">
					<div class="line-form">
						<div class="line-form-title"><label class="label-required">姓名：</label></div>
						<div class="line-form-content">
							<el-form-item prop="name">
								<el-input v-model="formData.name" placeholder="请输入姓名">
								</el-input>
							</el-form-item>
						</div>
					</div>
				</el-col>
				<el-col :span="12">
					<div class="line-form">
						<div class="line-form-title"><label class="label-required">人口分类：</label></div>
						<div class="line-form-content">
							<el-form-item prop="category">
								<el-select v-model="formData.category" class="m-2" placeholder="请选择人口分类">
									<el-option v-for="item in Dict.getList('category')" :key="item.value"
										:label="item.label" :value="item.value" />
								</el-select>
							</el-form-item>
						</div>
					</div>
				</el-col>
				<el-col :span="12">
					<div class="line-form">
						<div class="line-form-title"><label class="label-required">证件类型：</label></div>
						<div class="line-form-content">
							<el-form-item prop="cardType">
								<el-select v-model="formData.cardType" class="m-2" placeholder="请选择证件类型">
									<el-option v-for="item in Dict.getList('cardType')" :key="item.value"
										:label="item.label" :value="item.value" />
								</el-select>
							</el-form-item>
						</div>
					</div>
				</el-col>
				<el-col :span="12">
					<div class="line-form">
						<div class="line-form-title"><label class="label-required">证件号码：</label></div>
						<div class="line-form-content">
							<el-form-item prop="idcard">
								<el-input v-model="formData.idcard" @blur="onIdCardBlur" placeholder="请输入证件号码">
								</el-input>
							</el-form-item>
						</div>
					</div>
				</el-col>
				<el-col :span="12">
					<div class="line-form">
						<div class="line-form-title"><label class="label-required">手机号：</label></div>
						<div class="line-form-content">
							<el-form-item prop="contact">
								<el-input v-model="formData.contact" placeholder="请输入联系方式">
								</el-input>
							</el-form-item>
						</div>
					</div>
				</el-col>
				<el-col :span="12">
					<div class="line-form">
						<div class="line-form-title"><label class="label-required">民族：</label></div>
						<div class="line-form-content">
							<el-form-item prop="nation">
								<el-select v-model="formData.nation" class="m-2" placeholder="请选择民族信息">
									<el-option v-for="item in Dict.getList('nation')" :key="item.value" :label="item.label"
										:value="item.value" />
								</el-select>
							</el-form-item>
						</div>
					</div>
				</el-col>
				<el-col :span="12">
					<div class="line-form">
						<div class="line-form-title"><label class="label-required">文化程度：</label></div>
						<div class="line-form-content">
							<el-form-item prop="education">
								<el-select v-model="formData.education" class="m-2" placeholder="请选择文化程度">
									<el-option v-for="item in Dict.getList('education')" :key="item.value"
										:label="item.label" :value="item.value" />
								</el-select>
							</el-form-item>
						</div>
					</div>
				</el-col>
				<el-col :span="12">
					<div class="line-form">
						<div class="line-form-title">婚姻状况：</div>
						<div class="line-form-content">
							<el-form-item prop="marriage">
								<el-select v-model="formData.marriage" class="m-2" placeholder="请选择婚姻状况">
									<el-option v-for="item in Dict.getList('marriage')" :key="item.value"
										:label="item.label" :value="item.value" />
								</el-select>
							</el-form-item>
						</div>
					</div>
				</el-col>
				<el-col :span="12">
					<div class="line-form">
						<div class="line-form-title">政治面貌：</div>
						<div class="line-form-content">
							<el-form-item prop="political">
								<el-select v-model="formData.political" class="m-2" placeholder="请选择政治面貌">
									<el-option v-for="item in Dict.getList('political')" :key="item.value"
										:label="item.label" :value="item.value" />
								</el-select>
							</el-form-item>
						</div>
					</div>
				</el-col>
				<el-col :span="12">
					<div class="line-form">
						<div class="line-form-title">宗教信仰：</div>
						<div class="line-form-content">
							<el-form-item prop="religion">
								<el-select v-model="formData.religion" class="m-2" placeholder="请选择宗教信仰">
									<el-option v-for="item in Dict.getList('religion')" :key="item.value"
										:label="item.label" :value="item.value" />
								</el-select>
							</el-form-item>
						</div>
					</div>
				</el-col>
				<el-col :span="12">
					<div class="line-form">
						<div class="line-form-title">兵役状态：</div>
						<div class="line-form-content">
							<el-form-item prop="military">
								<el-select v-model="formData.military" class="m-2" placeholder="请选择兵役状态">
									<el-option v-for="item in Dict.getList('military')" :key="item.value"
										:label="item.label" :value="item.value" />
								</el-select>
							</el-form-item>
						</div>
					</div>
				</el-col>
				<el-col :span="12">
					<div class="line-form">
						<div class="line-form-title">户籍地址：</div>
						<div class="line-form-content">
							<el-form-item prop="registeredAddress">
								<el-input v-model="formData.registeredAddress"></el-input>
							</el-form-item>
						</div>
					</div>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<div style="text-align:center;">
				<el-button @click="visible = false">取消</el-button>
				<el-button type="primary" @click="handleSubmit">新增人口</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="UserDialog">
import { ref, reactive } from 'vue';
import { ElMessage, FormInstance, FormRules, ElMessageBox } from 'element-plus';
import { useModal } from '/@/hooks/useModal';
import { Dict } from '/@/utils/storage';
import rulesObj from './rules';

const formData = reactive<any>({
	id: '',
	name: '',
	idcard: '',
	category: '',
	cardType: '',
	nation: '',
	contact: '',
	avatar: '',
	birth: '',
	education: '',
	marriage: '',
	political: '',
	religion: '',
	military: '',
	dataStatus: 1,
	registeredAddress: '',
})

const onIdCardBlur = () => {
	if(formData.idcard) {
		if(formData.idcard.length === 15 || formData.idcard.length === 18) {
			formData.cardType = '01'
		}
		let nativePlaceCode = Number(formData.idcard.substring(0, 6));
		let shiCode = nativePlaceCode / 100;
		if(shiCode === 5201) {
			formData.category = '01';
		}
	}
}

//验证规则
const rules = reactive<FormRules>(rulesObj);

const ruleFormRef = ref<FormInstance>();
const { visible, acceptParams, handleSubmit, dialogData } = useModal(formData, ruleFormRef)

defineExpose({
	acceptParams,
});
</script>

<style scoped lang="scss">
:deep(.el-form-item) {
	margin-bottom: 0px !important;
}

:deep(.el-form-item) {
	width: 100%;
	padding-right: 6px;
}
:deep(.el-dialog__footer) {
    text-align: center !important;
}
</style>